<template>
  <div class="navbar">
    <div class="left-pane">
      <i class="el-icon-s-unfold" @click="isCollapseEvevt"></i>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item,index) in breadlitst" :key="index" :to="fun.getUrl(item.name)">{{item.meta.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="right-pane">
      <span>当前用户: {{member.nickname}}</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <img :src="member.avatar" alt="">
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <router-link :to="fun.getUrl('subplatformReset')">
            <el-dropdown-item>账号设置</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native.prevent="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Message , Breadcrumb , BreadcrumbItem
  , Dropdown , DropdownItem , DropdownMenu} from "element-ui";
  Vue.use(Breadcrumb).use(BreadcrumbItem)
  .use(Dropdown).use(DropdownItem).use(DropdownMenu);
  import http from '../js/http.js';

  Vue.prototype.$message = Message;
  export default {
    data() {
      return {
        breadlitst: [],
      };
    },
    props: {
      member: {
        type: null,
        default: () => {}
      }
    },
    watch:{
      $route:{
        handler(route){
          this.breadlitst = route.matched;
        },immediate:true
      }
    },
    methods: {
      isCollapseEvevt() {
        this.$emit('collapseEvevt')
      },
      logout() {
        try {
          http.get("member.logout.index").then(
            response => {
              if (response.result === 1) {
                this.$router.push(this.fun.getUrl("subplatformLogin"));
              }
            },
            err => {
              console.log(err);
            }
          );
        } catch ({data,result,msg,loginUrl}) {
          this.$message.error(msg);
          window.location.href = loginUrl;
        }
      }
    }
  };
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.navbar {
  height: 50px;
  border-bottom: 1px solid #eee;
  background: white;
  padding: 0 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left-pane {
    display: flex;
    align-items: center;
  }

  .right-pane {
    display: flex;
    align-items: center;

    img {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      margin-left: 10px;
    }

    .el-dropdown-link {
      margin-right: 20px;
    }

    .el-icon-caret-bottom {
      right: 2px;
      position: absolute;
      bottom: 6px;
    }
  }

  .el-icon-s-unfold {
    margin-right: 20px;
    font-size: 20px;
  }
}
</style>
